<!--选择页（站点）-->
<template>
  <view class="select-main">
    <nav-bar class="header" back :title="title" @goBack="goBack" />
    <view class="main-container">
      <!-- 搜索框  -->
      <view class="search">
        <van-search disabled show-action v-model="searchValue" 
          left-icon="" action-text="重置" 
          right-icon="search" placeholder="请输入站点名称" 
          @click="showSearch=true" @cancel="onSearch('')" />
      </view>

      <!-- 选项列表 -->
      <view class="option-list-with-sub">
        <ly-tree :tree-data="treeData" :showRadio="true" :props="props" :ready="ready" node-key="ORGID" @check="handleCheck" @node-expand="handleNodeExpand" @node-click="handleNodeClick" ref="tree">
        </ly-tree>

      </view>

    </view>
    <view class="bottom-container">
      <view class="select-result" @click="resultShow= true">
        <view class="sel_res_lf">
          <view v-if="resList.length>0">
            已选择：{{resList.length+'个'}}
            <van-icon name="arrow-up" />
          </view>
          <view class="sel_res_text" v-if="resList.length>0">{{resList[0].siteName}}</view>
        </view>
      </view>
      <text v-if="resList.length>0" class="clr-btn" @click="clear()">清空</text>
      <van-button color="#417ADC" @click="confirm()">确定</van-button>
    </view>
    <van-action-sheet v-model="resultShow">
      <van-cell :title="`已选择${resList.length}人`">
        <template #right-icon>
          <view @click="resultShow= false">确 认</view>
          <!-- <van-button round type="info" size="mini" style="width:px2vw(40)" @click="resultShow= false">确 认</van-button> -->
        </template>
      </van-cell>
      <van-list class="list-wrap" v-model="resLoading" :finished="resFinished" @load="resOnLoad">
        <van-cell :title="item.siteName" v-for="(item,index) in resList" :key="index">
          <template #right-icon>
            <view @click="handleReomve(index)">移除</view>
          </template>
        </van-cell>
      </van-list>
    </van-action-sheet>
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <!-- <search @cancel="showSearch = false;" @search="onSearch" /> -->
      <search-equ-match @cancel="showSearch = false;" @search="onSearch" :empty="showSearch"/>
    </van-popup>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import navBar from '../../components/common/nav-bar'
import searchEquMatch from './searchEquMatch'
import LyTree from '@/components/ly-tree/ly-tree.vue'
export default {
  name: 'selectSite',
  components: { navBar, LyTree, searchEquMatch },
  computed: {
    ...mapGetters(['userData'])
  },
  props: {
    selected: {
      type: Object,
      define: function () {
        return {}
      }
    },
    isInitiateTask: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    selected: {
      handler: function (newVal) {
        // this.$refs.tree.setCheckedKeys(newVal)
        this.$nextTick(() => {
          if (newVal && newVal.siteId) {
            this.$refs.tree.setCheckedKeys([newVal.siteId])
            this.resList = [newVal]
          } else {
            this.$refs.tree.setCheckedKeys([])
            this.resList = []
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      ready: false, // 这里用于自主控制loading加载状态，避免异步正在加载数据的空档显示“暂无数据”
      treeData: [],
      props: {
        label: 'NAME', // 指把数据中的‘personName’当做label也就是节点名称
        children: 'siteList', // 指把数据中的‘childs’当做children当做子节点数据
        selectKey: 'AREA', // 指把数据节点勾选判断值
        canAllSelect: false
      },
      resultShow: false,
      title: '选择站点',
      showSearch: false,
      searchValue: '',

      result: [],
      resLoading: false,
      resFinished: false,
      resList: []
    }
  },
  onLoad(option) {},
  mounted() {
    this.getSiteList()
    // this.treeData = this.siteLists
    // this.ready = true
  },
  methods: {
    onSearch(searchValue) {
      // this.searchValue
      this.searchValue = searchValue
      this.getSiteList()
      this.showSearch = false
    },
    goBack() {
      this.$emit('cancel')
    },
    confirm() {
      // this.$emit('changeSelected', this.resList[0])
      if(this.resList.length>0){
        this.$emit('update:selected', {
          siteId: this.resList[0].siteId,
          siteName: this.resList[0].siteName
        })
      } else {
        this.$emit('update:selected', {
          siteId: '',
          siteName:''
        })
      }
      this.$emit('cancel')
    },
    handleReomve(i) {
      this.$refs.tree.setChecked(this.resList[i].siteId, false)
      this.resList.splice(i, 1)
    },
    clear() {
      this.$refs.tree.setChecked(this.selected.siteId, false)
      this.$emit('update:selected', {
        siteId: '',
        siteName: ''
      })
      this.resList = []
    },
    // uni-app中emit触发的方法只能接受一个参数，所以会回传一个对象，打印对象即可见到其中的内容
    handleNodeClick(obj) {
      console.log('handleNodeClick', JSON.stringify(obj))
    },
    handleNodeExpand(obj) {
      console.log('handleNodeExpand', JSON.stringify(obj))
    },
    handleCheck(obj) {
      if (obj.node.checked) {
        // this.$emit('update:selected', {
        //   siteId: obj.data.ORGID,
        //   siteName: obj.data.NAME
        // })
        this.resList = [
        {
          siteId: obj.data.ORGID,
          siteName: obj.data.NAME
        }
      ]
      } else {
        // this.$emit('update:selected', {
        //   siteId: '',
        //   siteName: ''
        // })
        this.resList = []
      }
      
    },
    resOnLoad() {
      setTimeout(() => {
        // for (let i = 0; i < 4; i++) {
        //   this.resList.push({ name: '张三' + i })
        // }
        // 加载状态结束
        this.resLoading = false
        // 数据全部加载完成
        this.resFinished = true
      }, 100)
    },
    async getSiteList() {
      await this.$api
        .selectSiteList({ 
          orgtype: 1, 
          name: this.searchValue, 
          orgId: this.userData.orgId, 
          roleId: this.userData.roleId,
          searchTempWork: this.isInitiateTask ? '1' : ''
        })
        .then(res => {
          if (res.code == 0) {
            this.treeData = res.data.siteList
            this.ready = true
          }
        })
    }
  }
}
</script>

<style scoped lang="scss">
.select-main {
  height: 100vh;
  background-color: #f8f8f8;
  font-family: vant-icon;
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  .main-container {
    min-height: calc(100vh - #{px2vh(363)});
    padding: px2vh(30) px2vw(30) px2vh(30) px2vw(30);

    .search {
      width: px2vw(1020);
      height: px2vh(110);
      margin: auto auto px2vh(50);
      border-radius: $border-radius-base;
      overflow: hidden;
      .van-search {
        padding: 0;
        height: px2vh(110);

        .van-search__content {
          background: #fff;
          height: 38px;
        }
      }
      /deep/.van-field__control {
        height: 30px;
      }
    }
  }
  .bottom-container {
    display: flex;
    width: 91vw;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
    position: sticky;
    bottom: 0;
    height: px2vh(100);
    padding: px2vh(20) px2vw(40) px2vh(20) px2vw(49);
    background-color: #fff;

    .select-result {
      width: calc(100% - #{px2vw(240)} - #{px2vw(67)});
      // background: #acf;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .sel_res_lf {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        color: #417adc;
      }
      .sel_res_text {
        max-width: 2vw (220);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .clr-btn {
      color: #ee0a24;
      width: px2vw(120);
    }
    .van-button {
      height: px2vh(100);
      width: px2vw(240);
      font-size: px2vh(42);
      border-radius: px2vh(20);
    }
  }
  .option-list-with-sub {
    width: px2vw(1020);
    height: px2vh(1360);
    overflow-y: auto;
  }
}
.list-wrap {
  height: px2vh(600);
  margin-bottom: px2vh(20);
  overflow-y: auto;
}
</style>

